<!--
 * @description 组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view
		class="pure-code-input"
		:class="_classes"
		:style="_styles"
	>
		<view
			class="pure-code-input__item"
			v-for="(item, index) in length"
			:key="index"
			:class="_calcItemClasses(index)"
		>
			<text class="pure-code-input__item__text">{{ _calcItemText(index) }}</text>
		</view>
		<input
			class="pure-code-input__input"
			:value="modelValue"
			:type="type"
			:text-content-type="textContentType"
			:password="password"
			:maxlength="length"
			:cursor-spacing="cursorSpacing"
			:focus="focus"
			:confirm-type="confirmType"
			:confirm-hold="confirmHold"
			:cursor="cursor"
			:cursor-color="cursorColor"
			:selection-start="selectionStart"
			:selection-end="selectionEnd"
			:adjust-position="adjustPosition"
			:autoBlur="autoBlur"
			:ignoreCompositionEvent="ignoreCompositionEvent"
			:alwaysEmbed="alwaysEmbed"
			:holdKeyboard="holdKeyboard"
			:randomNumber="randomNumber"
			:controlled="controlled"
			:alwaysSystem="alwaysSystem"
			:inputmode="inputmode"
			@focus="onFocus"
			@input="onInput"
			@blur="onBlur"
			@confirm="onConfirm"
			@keyboardheightchange="onKeyboardheightchange"
		/>
	</view>
</template>

<script>
	import commonComponentOptions from "../../config/options";
	export default {
		options: commonComponentOptions
	};
</script>

<script setup>
	import { ref, computed, inject, onMounted, watch } from "vue";
	import props from "./props";

	// -------------------------------------------------------------------------------- Refs
	// 是否获取了焦点
	const _isFocus = ref(false);

	// -------------------------------------------------------------------------------- Injects
	const PureFormItemOnBlur = inject("PureFormItemOnBlur", null);
	const PureFormItemOnChange = inject("PureFormItemOnChange", null);

	// -------------------------------------------------------------------------------- Props
	const _props = defineProps(props);

	// -------------------------------------------------------------------------------- Emits
	const _emits = defineEmits([
		"onInput",
		"onFocus",
		"onBlur",
		"onConfirm",
		"onKeyboardHeightChange",
		"update:modelValue"
	]);

	// -------------------------------------------------------------------------------- Classes
	const _classes = computed(() => {
		const array = [];

		// 是否获取了焦点
		if (_isFocus.value) array.push("pure-code-input--focus");

		// 是否只读
		if (_props.readonly) array.push("pure-code-input--readonly");

		return array;
	});

	// -------------------------------------------------------------------------------- Styles
	const _styles = computed(() => {
		const array = [];

		// 尺寸
		if (_props.size) array.push(`--pure-code-input-item-size: ${_props.size}`);

		// 光标颜色
		if (_props.cursorColor) array.push(`--pure-code-input-cursor-color: ${_props.cursorColor}`);

		return array;
	});

	// 监听输入的内容
	watch(
		() => _props.modelValue,
		(newValue, oldValue) => {
			// 输入完成
			if (newValue?.toString()?.length === _props.length) {
				// 触发确认事件
				onConfirm({ detail: { value: newValue } });
			}
		}
	);

	// 计算 item classes
	function _calcItemClasses(index) {
		const array = [];

		// 已输入长度
		const inputLength = _props?.modelValue?.length || 0;

		// 是否激活
		if (index === inputLength) array.push("pure-code-input__item--active");

		return array;
	}

	// 计算 item text
	function _calcItemText(index) {
		return _props?.modelValue?.toString()?.[index] || "";
	}

	// -------------------------------------------------------------------------------- Events
	// 获取焦点事件
	function onFocus(e) {
		_isFocus.value = true;
		_emits("onFocus", e);
	}

	// 失去焦点事件
	function onBlur(e) {
		_isFocus.value = false;
		_emits("onBlur", e);
		PureFormItemOnBlur?.();
	}

	// 输入事件
	function onInput(e) {
		_emits("update:modelValue", e.detail.value);
		_emits("onInput", e);
		if (_props?.modelValue !== e.detail.value) PureFormItemOnChange?.();
	}

	// 确认事件
	function onConfirm(e) {
		_emits("onConfirm", e);
	}

	// 键盘高度变化事件
	function onKeyboardheightchange(e) {
		_emits("onKeyboardHeightChange", e);
	}
</script>

<style scoped lang="scss">
	@import "./style.scss";
</style>
